
<template>
	<view>
		<view class="aside">平台将为您保留24小时内的通话记录</view>
		<view class="middle" v-for="(item,index) in list">
			<view class="middle_top">{{item.creationTime}}</view>
			<view class="middle_box">
				<view class="description_top">
					<view class="fl">
						<text>{{item.tWaybill.shipZone}}</text>
						<image src="../../static/iocn4.png"></image>
						<text>{{item.tWaybill.receiveZone}}</text>
					</view>
					<!-- <view class="fr">2022.10.31 14:28</view> -->
				</view>
				<view class="description_key">
					<text>货物信息：{{item.tWaybill.goodsName}} / {{item.tWaybill.goodsPackagMethod}} / {{item.tWaybill.goodsSize}}m³ / {{item.tWaybill.goodsWeight}}T </text>
					<text>车辆信息：{{item.tWaybill.lesscarload}} / {{item.tWaybill.demandLength}} / {{item.tWaybill.demandLoad}}T / {{item.tWaybill.demandStyle}}</text>
				</view>
				<!-- <view class="middleview">
					<view>联系货主</view>
				</view> -->
			</view>
		</view>
		<view v-if="item.totalCount == 0">
			<u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png"></u-empty>
		</view>
		<view>
			<Tabbar :current="'2'"></Tabbar>
		</view>
	</view>
</template>

<script>
	import {
		GetCallRecord
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	import Tabbar from '@/pages/navigation/sjnavigation.vue';
	export default {
		components: {
			//注册组件
			Tabbar
		},
		data() {
			return {
				skipCount: 0,
				maxResultCount: 10,
				list: [],
				isLoadMore: false, //是否加载中
			};
		},
		onLoad() {
			// var statusact = getValue('statusact')
			// if (statusact == '停用')  {
			// 	uni.reLaunch({
			// 		url: '/pages/Loginas/index'
			// 	})
			// }
			this.GetCallRecord()
		},
		//监听页面触底函数
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.skipCount += 10
				this.GetCallRecord()
			}
		},
		methods: {
			// 获取通话记录
			async GetCallRecord() {
				var skipCount = this.skipCount
				var maxResultCount = this.maxResultCount
				var driverId = getValue('id')
				try {
					const {
						data: res
					} = await GetCallRecord({
						skipCount,
						maxResultCount,
						driverId
					})
					if (res.result.items) {
						this.list = this.list.concat(res.result.items)
						if (res.result.totalCount < this.list.length) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							console.log(123)
						} else {
							this.isLoadMore = false
							console.log(456)
						}
					}
				} catch (e) {}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 20upx 20upx 200upx;
	}

	.aside {
		width: 414upx;
		line-height: 28upx;
		background-color: rgba(240, 77, 62, 0.1);
		font-size: 21upx;
		color: #383838;
		margin: 0 auto;
		margin-top: 25upx;
		text-align: center;
	}

	.middle {
		padding-top: 30upx;

		.middle_top {
			font-size: 24upx;
			text-align: center;
			font-weight: bold;
		}

		.middle_box {
			border-radius: 17.52upx;
			box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc, 1.75upx 1.75upx 7.01upx 0px #cccccc;
			padding: 0 38upx 23upx;
			background-color: #fff;
			margin-top: 25upx;
		}

		.description_top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.fl {
				display: flex;
				align-items: center;

				text {
					font-size: 28.04upx;
					font-weight: bold;
					color: #000;
				}

				image {
					width: 109upx;
					height: 109upx;
				}
			}

			.fr {
				font-size: 15.77upx;
				color: rgba(56, 56, 56, 1);
			}
		}

		.description_key {
			margin-top: -30upx;
			padding-bottom: 20upx;
			// border-bottom: 2upx solid #e5e5e5;

			text {
				display: block;
				font-size: 21.03upx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
				padding-top: 15upx;
			}
		}
	}

	.middleview {
		display: flex;
		justify-content: flex-end;

		view {
			width: 158upx;
			height: 46upx;
			border-radius: 10upx;
			border: 2upx solid #EF4D3D;
			color: #EF4D3D;
			text-align: center;
			line-height: 42upx;
			font-size: 28upx;
			font-weight: bold;
		}

	}
</style>

